<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>广告主管理</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>广告主名称</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="广告主名称" id="advertiserNameQuery" name="advertiserName" th:value="${advertiserName}">
                                    </div>
                                </div>
                            </div>
                            <div style="display: none">
                                <input name="pageNum" th:value="${pageNum}">
                                <input name="pageSize" th:value="${pageSize}">
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <div class="z-btn-group">
                        <a data-title="创建部门" class="j-btn-control z-btn z-default btn-add">新增广告主</a>
                    </div>
                    <table class="z-table">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="input j-checkbox-all">
                            </th>
                            <th>广告主</th>
                            <th>公司名称</th>
                            <th>税号</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>账号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="advertiser: ${advertiserList}" th:attr="data-id=${advertiser.advertiserId}, data-advertisername=${advertiser.advertiserName},
                               data-companyname=${advertiser.companyName},data-taxnumber=${advertiser.taxNumber},data-contacts=${advertiser.contacts},
                               data-contactnumber=${advertiser.contactNumber},data-username=${advertiser.userName}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td th:text="${advertiser.advertiserName}"></td>
                            <td th:text="${advertiser.companyName}"></td>
                            <td th:text="${advertiser.taxNumber}"></td>
                            <td th:text="${advertiser.contacts}"></td>
                            <td th:text="${advertiser.contactNumber}"></td>
                            <td th:text="${advertiser.userName}"></td>
                            <td class="btn-group">
                                <a class="btn-del">删除</a>
                                <a class="btn-detail">修改</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!-- 分页 -->
                    <div class="app-card-body">
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<!--新增/编辑-->
<div class=" popup-default z-popup z-fixed z-df z-flex-cc z-hide">
    <div class="bg" data-popup-close=""></div>
    <div class="section popup-add z-hide">
        <div class="title">新增广告主</div>
        <div class="content" id="advertiserForm">
            <form>
                <div class="form-item row" style="display: none">
                    <div class="label">
                        <label>ID</label>
                    </div>
                    <div class="body">
                        <input type="hidden" name="advertiserId" class="advertiserId">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>广告主名称</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="请输入广告主名称" class="advertiserName"
                               name="advertiserName" data-name="广告主名称" data-rule="required,length" minlength="1"
                               maxlength="32">

                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>公司名称</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="请输入公司名称" class="companyName" name="companyName">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>税号</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="税号" class="taxNumber" name="taxNumber">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>联系人</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="联系人" class="contacts" name="contacts">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>联系电话</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="联系电话" class="contactNumber" name="contactNumber">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>账号</label>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="账号" class="userName" name="userName">
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>密码</label>
                    </div>
                    <div class="body">
                        <input type="password" placeholder="密码" class="password" name="password">
                    </div>
                </div>
            </form>
            <div class="z-btn-group">
                <a class="btn-submit z-btn z-primary user-comfirm">确定</a>
                <a class="z-btn z-default" data-popup-close="">取消</a>
            </div>
        </div>
    </div>
    <div class="popup-detail section z-hide"></div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        eventEmit();
    })

    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    //处理分页
    var advertiserNameQuery = $("#advertiserNameQuery").val();
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var queryURL = "/advertiser/list?pageSize=" + pageSize;
    if (context) {
        queryURL = context + queryURL;
    }
    if (advertiserNameQuery) {
        queryURL = queryURL + "&advertiserName=" + advertiserNameQuery;
    }
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            window.location.href = queryURL + "&pageNum=" + pageIndex;
        }
    })

    function eventEmit() {
        // 新增 - 弹窗打开
        $('.btn-add').click(function () {
            departmentCity = null;
            departmentCityDisabled = null;
            $('.popup-add').formLoad({
                advertiserId: '',
                advertiserName: '',
                companyName: '',
                taxNumber: '',
                contacts: '',
                contactNumber: '',
                userName: '',
                password: ''
            })
            popup.open('.popup-add')
        })

        // 修改 - 弹窗打开
        $('.btn-detail').click(function () {
            var data = $(this).parents('tr')[0].dataset;
            //取值
            var advertiserId = data["id"];
            var advertiserName = data["advertisername"];
            var companyName = data["companyname"];
            var taxNumber = data["taxnumber"];
            var contacts = data["contacts"];
            var contactNumber = data["contactnumber"];
            var userName = data["username"];
            $('.popup-detail').html($('.popup-add').html()).find('.title').text('修改');
            $('.popup-detail').formLoad({
                advertiserId: advertiserId,
                advertiserName: advertiserName,
                companyName: companyName,
                taxNumber: taxNumber,
                contacts: contacts,
                contactNumber: contactNumber,
                userName: userName
            })
            popup.open('.popup-detail');
        })
    }
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 新增 - 弹窗保存
    var form = $(".popup-add form").form({
        submitSelector: ".popup-add .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".popup-add form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })
            console.log(data);
            $.ajax({
                type: "POST",
                url: context + "/advertiser/save",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop('新增广告主成功', 'success');
                        setTimeout(function (args) {
                            //跳转到用户列表
                            window.location.href = context + "/advertiser/list";
                        }, 100);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })


    // 修改 - 弹窗确定
    var form = $(".popup-detail form").form({
        submitSelector: ".popup-detail .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".popup-detail form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })
            //修改
            $.ajax({
                type: "POST",
                url: context + "/advertiser/update",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop('修改广告主成功', 'success');
                        setTimeout(function (args) {
                            //跳转到用户列表
                            window.location.href = context + "/advertiser/list";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })

    // 删除
    $('.btn-del').click(function () {
        if (confirm('确认是否删除')) {
            var data = $(this).parents('tr')[0].dataset;
            var id = data["id"];
            //默认（0：启用）
            var status = 0;
            $.ajax({
                type: "POST",
                url: context + "/advertiser/delete",
                data: {
                    advertiserId: id
                },
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop('success', '删除广告主成功');
                        //跳转到用户列表
                        window.location.href = context + "/advertiser/list";
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })
</script>
</body>

</html>